<link  type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" rel="stylesheet"/>
<script type="text/javascript" src="https://www.layuicdn.com/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
      dir: 'https://www.layuicdn.com/layui/' 
      ,version: false 
      ,debug: false 
      ,base: '' 
    });
</script>
<style type="text/css">
	.site-doc-icon li .layui-anim {
   width: 150px;
   height: 150px;
   line-height: 150px;
   text-align: center;
   background-color: #009688;
   cursor: pointer;
   color: #fff;
   margin: 30px;
   border-radius: 50%;
 }
</style>



<!-- https://www.layui.com/doc/element/anim.html -->
<ul class="site-doc-icon site-doc-anim" style="display: flex;justify-content: space-around;flex-wrap: wrap;">
  <li>
    <div class="layui-anim" data-anim="layui-anim-up" >从最底部往上滑入</div>
  </li>
  <li>
    <div class="layui-anim" data-anim="layui-anim-upbit">微微往上滑入</div>
  </li>
  <li>
    <div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
  </li>
  <li>
    <div class="layui-anim" data-anim="layui-anim-scaleSpring">弹簧式放大</div>
  </li>
</ul>
<ul class="site-doc-icon site-doc-anim" style="display: flex;justify-content: space-around;flex-wrap: wrap;">
  <li>
    <div class="layui-anim" data-anim="layui-anim-fadein">渐现</div>
  </li>
  <li>
    <div class="layui-anim" data-anim="layui-anim-fadeout">渐隐</div>
  </li>
  <li>
    <div class="layui-anim" data-anim="layui-anim-rotate">360度旋转</div>
  </li>
  <li>
    <div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</div>
  </li>
</ul>   

<script type="text/javascript">
	$('.site-doc-icon .layui-anim').on('click', function(){

    var othis = $(this), anim = othis.data('anim');
    console.log(othis.parent().index());
    //停止循环
    if(othis.hasClass('layui-anim-loop')){
      return othis.removeClass(anim);
    }
    
    othis.removeClass(anim);
    
    setTimeout(function(){
      othis.addClass(anim);
    });
    //恢复渐隐
    if(anim === 'layui-anim-fadeout'){
      setTimeout(function(){
        othis.removeClass(anim);
      }, 1300);
    }
  });
</script>